@charset "utf-8";
@import "reset";
@function r($rem){
    @return $rem/100+rem; 
}
body,html{
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .shouye{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 9999;
        background: white;
        .begins{
            font-size:r(30);
            color: black;
            font-weight: bold;
            position:absolute;
            left: 50%;
            top:  45%;
            transform: translate(-50%,-50%);
            &:hover{
                color: red;
            } 
        }
    }
    .start{
        background: white;
        color: black;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        font-size: r(30);
        .loImg{
            width: r(300);
            p{
                font-size: r(20);
            }
        }
        .load{
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%) ;
            font-size: r(40);
        }
    }
//  .game{
//      width: 100%;
//      height: 100%;
//      position: relative;
        .spanone{
            font-size: r(30);
            color:#000;
            font-size: r(30);
            z-index: 2;
            font-weight: bold;
            position: absolute;
            top: r(30);
            left: r(30);
        }
        .plane{
            width: r(60);
            position: absolute;
            z-index: 2;
            top: 0;
            left:r(320);
            animation-duration: 1500ms;
            animation-fill-mode: forwards;
            transition: 200ms;
            font-size: 0;
            img{
                transition: 1s;
                transform: rotate(180deg);
                width: 100%;
            }
        }//plane
//  }
    .bg{
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 1;
        overflow: hidden;
        .le{
            position: absolute;
            border: r(20) solid black;
            width: r(300);
            height: r(20);
            top: r(730);
            left: 0;
        }
        .ri{
            position: absolute;
            border: r(20) solid black;
            width: r(100);
            height: r(20);
            top: r(730);
            right: 0;
        }
        .bg_img{
            font-size:r(40);
            overflow: hidden;
            img{
                width:100% ;
                height:50%
            }
        }
    }
    .div1{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        z-index: 1000;
        display: none;
        animation:all;
        animation-name:end;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        font-size: 0;
        p{
            position: absolute;
            text-align: center;
            font-weight: bold;
            font-size: r(60);
            color: #000;
            padding-left: r(20);
            width: 100%;
            top: 40%;
            transform:translateY(-50%);
        }
        .userName{
                width: 55%;
                margin: r(510) auto 0;
                border: r(1) solid #000000;
                border-radius: r(30);
                margin-bottom: r(30);
                text-align: center;
                background: #fff;
                input[type="text"]{
                    margin: r(10) auto;
                    text-align: center;
                    border: none;
                }
         }
         .sub{
             width: r(200);
             height: r(80);
             border: r(1) solid #000000;
             background: #000;
             border-radius:r(40);
             float: right;
             color: white;
             font-size: r(30);
             line-height: r(80);
             text-align: center;
             margin-right: r(30);
             
         }
    }
    .div2{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        z-index: 1001;
        display: none;   
        .img{
            margin-top: r(250);
            display: inline-block;
            width: 100%;
            overflow: hidden;
            padding-left: 30%;
            img{
                width: 100%;
            }
        }
        p{
            text-align: center;
            font-size: r(30);
            color: #000;
        }
        .sel{
            width: 100%;
            font-size: 0;
            position: relative; 
            margin-top: r(50);
            top: 0;
            text-align: center;
            .lottery{
                text-align: center;
                a{
                    display: inline-block;
                    font-weight: bold;
                    font-size: r(50);
                    cursor: pointer;
                    color: #000;
                }
            }
            .x{
                width: 100%;
                display: flex;
                align-content: space-around;
                padding-left: r(50);
                margin-top: r(40);
                div{
                    flex: auto;
                    text-align: center;
                }
                a{
                    width: 80%;
                    height: 100%;
                    display: inline-block;
                    font-size: r(50);
                    line-height: r(50);
                    font-weight: bold;
                    cursor: pointer;
                    color: #000;
                }
                div:nth-child(1){
                    text-align: right;
                }
                div:nth-child(3){
                    text-align: left;
                }
            }
        }
    }
    .Share{
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 9999999;
        background:  #fff url(../img/share.png) no-repeat;
        opacity: 0.5;
        background-size:contain ;
    }
    .RankingList{
        width: 100%;
        height: 100%;
        background: yellow;
        position: absolute;
        z-index: 9999999999;
        display:none ;
        .grade{
            width: 80%;
            margin: r(250) auto;
            background: orange;
            overflow: hidden;
            h2{
                padding: r(10) 0;
                font-size: r(30);
                text-align: center;
                border: r(2) solid #000;;
                border-bottom: none;
            }
            .list{
                font-size: 0;
                ul{
                    width: 100%;
                    border-left:r(2) solid #000; 
                    border-right:r(2) solid #000; 
                    &::before{
                        content:"";
                        clear:both;
                    }
                    li{
                        width: 100%;
                        span{
                            display: inline-block;
                            width: 33%;
                            height: r(40);
                            font-size: r(30);
                            text-align: center;
                            line-height:r(40);
                        }
                    }
                }
                .UL{
                    height: r(300);
                    overflow: auto;
                    border-bottom:r(2) solid #000; 
                }
            }
        }
    }
}
@keyframes plane{
    0%{
        transform:   translateY(r(0))  ; 
    }
    100%{
//      transform: translateY(r(500)) ;
        top:r(500)
    }
}

@keyframes end{
    0%{
       transform:  translateY(r(-1000));
    }
    100%{
       transform:  translateY(0);
    }
}

@keyframes end1{
    0%{
       transform:  translateY(r(-1500));
    }
    100%{
       transform:  translateY(0);
    }
}

